<template>
  <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :value="false">expand</el-radio-button>
    <el-radio-button :value="true">collapse</el-radio-button>
  </el-radio-group> -->
  <el-menu :default-active="activeUrl" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
    @close="handleClose" :router="true">
    <el-menu-item index="/project" route="/project">
      <el-icon><icon-menu /></el-icon>
      <template #title>项目管理</template>
    </el-menu-item>
    <el-menu-item index="/iteration" route="/iteration">
      <el-icon>
        <HelpFilled />
      </el-icon>
      <template #title>迭代管理</template>
    </el-menu-item>
    <el-menu-item index="/task" route="/task">
      <el-icon>
        <Paperclip />
      </el-icon>
      <template #title>任务管理</template>
    </el-menu-item>
    <el-menu-item index="/case" route="/case">
      <el-icon>
        <Folder />
      </el-icon>
      <template #title>测试管理</template>
    </el-menu-item>
    <el-sub-menu index="4">
      <template #title><el-icon>
          <setting />
        </el-icon>用户中心</template>
      <el-menu-item route="/user/center/info" index="/user/center/info">用户信息</el-menu-item>
      <el-menu-item route="/user/center/password" index="/user/center/password">修改密码</el-menu-item>
      <el-menu-item route="/user/center/modifyUserInfo" index="/user/center/modifyUserInfo">修改信息</el-menu-item>
      <el-menu-item v-if="admin" route="/user/center/user/list" index="/user/center/user/list">用户列表</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";

const isCollapse = ref(false);
const admin = ref(false);
const activeUrl = ref("");

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};

onMounted(() => {
  admin.value = JSON.parse(localStorage.getItem("userInfo")).userName === "admin";
  activeUrl.value = window.location.pathname;
});
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  min-height: 400px;
}
</style>
